<template>
  <view>
    <view class="components-title">
      <view class="components-title-t">gg-specs</view>
      <view class="components-title-d">规格</view>
    </view>
    <view class="components-info">
      <view class="components-info-title">选中信息</view>
      <view class="components-info-list" v-if="changeData">
        <view class="components-info-list-item">
          <!--  #ifdef  MP-WEIXIN -->
          <view v-for="(item,key) in changeData" :key="key">
            <text>&Prime;{{key}}&Prime;:</text>
            <text>{{' &Prime;'+item+'&Prime;'}}</text>
          </view>
          <!--  #endif -->
          <!--  #ifndef  MP-WEIXIN -->
          <text>{{changeData}}</text>
          <!--  #endif -->
        </view>
      </view>
      <view class="components-info-list-tip" v-else>
        <view><text>未选择</text></view>
        <view><text>点击输入框右侧搜索按钮选择地址</text></view>
      </view>
    </view>

    <gg-specs :specList="specList" :skuList="skuList" @change="change" />

  </view>
</template>
<script>
export default {
  data() {
    return {
      specList: {},
      skuList: {},
      changeData: null,
    };
  },
  onLoad() {
    setTimeout(() => {
      this.testReqMocck().then((res) => {
        this.specList = {
          "items": [
            { "name": "尺码", "items": [{ "name": "S" }, { "name": "M" }, { "name": "L" }, { "name": "XL" }] },
            { "name": "颜色", "items": [{ "name": "白色" }, { "name": "黑色" }, { "name": "灰色" }] },
            { "name": "款式", "items": [{ "name": "印花" }, { "name": "涂鸦" }, { "name": "无" }] }
          ],
        },
          this.skuList = {
            "items": [
              { "id": "19", "price": 200, "stock": 19, "sku": ["S", "黑色", "无"] },
              { "id": "21", "price": 300, "stock": 10, "sku": ["M", "红色", "印花"] },
              { "id": "23", "price": 500, "stock": 48, "sku": ["M", "白色", "印花"] },
              { "id": "20", "price": 300, "stock": 29, "sku": ["M", "灰色", "无"] },
              { "id": "22", "price": 300, "stock": 200, "sku": ["XL", "黑色", "无"] }
            ],
          }
      });
    }, 1000)
  },
  methods: {
    testReqMocck(testData) {
      return new Promise((resolve, reject) => {
        resolve({
        });
      });
    },
    change(e) {
      this.changeData = e;
    },

  }
}
</script>
<style>
.components-info {
  background-color: #ffffff;
  padding: 10px;
}
.components-info-title {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
}
.components-info-list,
.components-info-list-tip {
  margin: 20px 0;
}
.components-info-list-tip {
  text-align: center;
  font-size: 12px;
  color: #99999999;
}
.components-info-list-title {
  font-size: 12px;
  color: #999999;
}
.components-info-list-item {
  font-size: 12px;
  color: #666666;
  padding-left: 40px;
}
</style>